<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		Aline Demo
	</title>
	<link rel="stylesheet" type="text/css" href="Aline.css" />
	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
		}

		body {
			text-align: center;
		}
	</style>
</head>

<body>
	<div>
		<svg width="200" height="400" class="infinite" id="demo1">
			<path d="M2,210 L20.5,210" class="t-1" fill="none" stroke="#020202" stroke-width="3"></path>
			<path d="M11,212 L11,229" class="t-2" fill="none" stroke="#020202" stroke-width="3"></path>
			<path d="M28.5,229.5 C27.5,216.833333 28.5,209.833333 31.5,208.5 C36,206.5 42,207.5 42.5,213 C42.8333333,216.666667 42.8333333,222.166667 42.5,229.5"
				class="a-1" fill="none" stroke="#050505" stroke-width="3"></path>
			<path d="M30,222 L36.5,219.5" class="a-2" fill="none" stroke="#040404" stroke-width="3"></path>
			<path d="M52.5,220.5 C51.772058,215.205876 52.5,209.5 58,208.5 C63.5,207.5 66.5,211 68,214.25 C69,216.416667 68.3333333,220.166667 66,225.5 C64.4336186,228.85813 62.266952,230.024797 59.5,229 C55.3495721,227.462804 53.227942,225.794124 52.5,220.5 Z"
				class="o" fill="none" stroke="#0A0A0A" stroke-width="3"></path>
			<path d="M91.5,209 C81.8333333,208.666667 76.6666667,210.666667 76,215 C75,221.5 76.5,224.5 79.5,227 C81.5,228.666667 85.5,229.166667 91.5,228.5"
				class="c" fill="none" stroke="#020202" stroke-width="3"></path>
			<path d="M100.5,229.5 C100.166667,219.5 100.333333,213.333333 101,211 C102,207.5 105,208 108.5,208 C112,208 115,210.5 115.5,214.5 C115.833333,217.166667 115.833333,222.166667 115.5,229.5"
				class="a2-1" fill="none" stroke="#100F0F" stroke-width="3"></path>
			<path d="M102,220.5 L108.5,218.5" class="a2-1" fill="none" stroke="#100F0F" stroke-width="3"></path>
			<path d="M126,228.5 C124.666667,216.833333 124.5,210.666667 125.5,210 C127,209 141,209 141,209.5" class="f-1" fill="none"
				stroke="#060405" stroke-width="3"></path>
			<path d="M126.5,219.5 L140,219.5" class="f-2" fill="none" stroke="#060405" stroke-width="3"></path>
			<path d="M164.5,209.5 C155.5,208.833333 150.5,209 149.5,210 C148,211.5 149.5,228 149.5,228.5 C149.5,228.833333 154.5,229 164.5,229"
				class="e-1" fill="none" stroke="#060405" stroke-width="3"></path>
			<path d="M150,219 L164,219" class="e-2" stroke="#060405" stroke-width="3" fill="none" id="last"></path>
		</svg>
	</div>
	<div>
		<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" id="demo2">
			<path id="svg_1" d="m107.36268,212.50561c-3.74952,-1.41596 1.14332,-4.24693 2.99571,-5.49922c1.24775,-0.96443 -7.15092,0.13529 -3.60508,-3.21262c3.89031,-2.73506 2.42075,-7.36218 -1.46787,-9.51304c-5.35156,-3.02596 -12.21795,-5.61576 -14.19501,-11.26606c-1.9991,-3.51932 2.7418,-7.22588 -0.30752,-10.40391c-2.45443,-4.12634 0.41304,-8.42926 2.19538,-12.25167c0.81966,-5.28754 -4.2014,-9.46897 -6.96268,-13.81298c-3.41908,-4.15123 -5.39,-8.98837 -5.67322,-14.02924c-0.74356,-2.15166 0.07931,-5.49312 3.04849,-2.59225c6.2179,4.16938 13.04411,8.12562 17.39591,13.8325c0.82375,2.06137 4.1222,8.03581 4.30639,2.62561c0.08627,-7.43594 2.7983,-15.54594 9.74766,-20.52896c4.72684,-3.60683 7.276,2.70859 7.49656,5.91784c1.23031,6.31447 -0.80907,12.5763 -3.08166,18.54117c-0.83429,2.77207 -3.00699,10.36855 3.18958,7.5676c14.27467,-4.61515 31.5695,0.232 40.86741,10.14631c4.27417,4.80039 6.14598,10.96777 6.10372,16.8895c-2.20086,3.47899 5.97652,-0.06517 3.01343,3.94853c-1.74434,4.44623 -6.67277,6.8588 -10.125,10.21478c-3.51292,2.6892 -0.90644,8.43882 -6.7158,9.28602c-8.47656,2.18827 -17.37764,3.14681 -26.20203,3.70475c-4.9381,0.8472 -7.33459,-3.88136 -2.60159,-5.84715c2.26913,-2.92933 8.76104,-3.13462 10.68992,-3.59868c-4.60938,0.37768 -10.2939,-1.1978 -14.17799,1.19275c-2.35225,3.19775 -4.2362,7.40669 -9.16889,8.31943c-2.21674,0.51557 -4.49595,0.92902 -6.76583,0.36898l0,0z"
				stroke-width="1.5" stroke="#000" fill="#FABA6F" />
			<path stroke="#000" id="svg_2" d="m247.1926,165.1646c0.34206,0.2692 1.06596,-0.24066 1.41765,-0.30366c-0.39583,-0.61191 1.09513,-3.59303 0.58054,-4.67565c-0.15833,-2.44765 -4.1661,-7.97271 -4.67083,-8.61384c0.19253,-0.42996 2.35024,-0.02986 2.28583,0.03182c-0.90041,0.86251 3.03845,5.81252 3.49334,8.67616c0.83818,-0.05517 1.93917,-0.4286 2.42779,0.18828c0.45628,-0.5929 3.97695,-5.123 4.16942,-9.03747c0.02758,-0.56096 1.93841,-0.20594 1.57896,0.13598c-0.57617,2.43718 -4.63929,9.27998 -4.95672,9.52911c0.36942,2.13382 0.21986,2.28008 2.5795,3.93928c1.06194,-2.96523 3.32462,-5.48228 5.39701,-7.98747c2.34007,-2.81284 3.91055,-5.50751 6.48828,-8.43569c3.39337,-3.71963 7.72708,-7.11366 11.69624,-9.13971c2.76117,-1.40943 7.38748,-2.6177 8.09669,-2.69678c1.31385,-0.15168 2.50198,-0.12475 4.05932,0.1504c2.29789,0.40597 4.5416,0.6327 6.95416,1.97936c2.2685,1.72834 1.48431,3.89447 1.06134,5.92346c-3.49388,4.58173 -7.07237,10.06898 -8.19938,15.68272c-0.37892,2.07866 -1.06023,5.66058 -2.6682,7.91057c-2.58508,3.46094 -5.74883,3.33294 -8.72138,3.8021c1.81124,0.61669 3.77571,2.63032 5.53812,4.65377c2.74927,3.18266 4.08889,6.4465 3.37893,9.99977c-0.15114,0.74529 -2.77251,6.39823 -4.05466,8.17198c-4.86647,6.75412 -11.49177,11.33464 -16.83162,10.59124c-1.92296,-0.2677 -7.22712,-5.06885 -8.18076,-6.48555c-2.36737,-3.51686 -4.31189,-7.75886 -4.39182,-11.46241c-0.29428,-0.34964 -0.65417,-0.37547 -0.49549,-0.84323c-0.29488,1.07113 -1.23126,4.55937 -2.61753,6.76458c-2.00415,3.18812 -3.83873,-1.57764 -4.58131,-5.44248c-0.25457,-1.32486 -0.06773,-1.55422 -0.36464,-2.34643c-1.40394,0.63345 -0.66471,2.47017 -1.21568,3.95389c-0.46711,1.29206 -2.55905,5.23849 -3.13674,6.13817c-1.84664,2.87587 -5.99314,7.22775 -9.0003,8.272c-2.791,0.96919 -5.1565,0.83322 -7.39961,-0.53487c-2.89322,-1.76457 -6.97062,-5.86272 -9.47907,-9.19495c-3.17553,-4.12312 -5.95102,-10.31793 -3.30942,-14.68148c1.68606,-2.72261 4.85979,-6.78002 7.96112,-7.77704c-2.18924,-0.31883 -7.03291,-2.0346 -8.83424,-6.80024c-0.57817,-1.51095 -0.79265,-3.8602 -0.93971,-5.54106c-0.23927,-2.77503 -1.30403,-5.9633 -2.18791,-8.69574c-0.71054,-2.49811 -1.96637,-5.69624 -3.28067,-8.42932c-1.37737,-2.86808 -2.50661,-7.61057 -0.10957,-9.94589c0.83733,-0.8159 3.43004,-1.7675 3.97189,-1.83536c1.89408,-0.24051 4.47459,0.86556 6.3902,1.52914c1.25501,0.43835 6.76169,2.77789 8.28457,4.06607c10.03957,8.49229 17.17843,19.07057 21.81636,28.81646z"
				stroke-opacity="null" stroke-width="1.5" fill="#B9FFCE" />
			<path id="svg_4" d="m393.51556,212.24291c-3.92675,-1.15495 -8.201,0.53325 -12.39616,-1.14895c3.39279,-0.14498 8.49092,-0.01092 7.59061,-3.46701c1.48451,-4.03594 -1.52815,-8.27008 0.97995,-11.78258c-3.928,-2.57427 -8.0509,-5.62207 -10.14513,-9.21768c-0.42031,1.45058 -0.80767,2.60451 -1.40502,0.10365c-0.34242,-1.22385 -0.13463,3.02525 -1.44385,0.04384c-1.38088,-2.65107 -5.09852,-9.56364 -6.25202,-3.15217c-0.47908,3.30851 -1.98248,0.96101 -2.66963,-1.13856c-0.69817,-4.04294 -3.21997,-7.78833 -3.88046,-11.82337c2.58148,-2.55607 -0.36801,-2.9041 -1.74003,-0.35403c-1.51084,4.04545 -2.80512,8.04931 -1.22902,12.21701c-2.09458,1.17695 -6.13749,-5.47704 -4.27798,-8.02942c1.6132,-2.88799 1.25453,-5.83579 1.52298,-7.78942c1.475,-2.20383 -1.43515,-4.59872 0.11177,-6.94893c-3.95291,2.96015 -7.48787,5.00764 -6.37745,9.65162c-0.49066,1.15847 1.6475,7.81987 0.28577,5.36693c-2.57096,-4.78852 -2.57293,-10.0918 -0.63819,-14.97792c0.00238,-3.72946 -4.40127,6.44037 -4.0762,1.45558c-0.41677,-3.75939 1.83882,-7.89329 3.97505,-10.86567c-2.43221,-1.98801 -10.30983,-0.57932 -6.58309,-4.79965c3.66758,-2.14497 3.27453,-5.09456 -1.71706,-2.50103c-7.70787,3.88855 -14.10278,8.88437 -21.1688,13.3005c6.78886,-5.99434 14.44222,-11.79492 23.9147,-15.81639c9.18442,-3.97267 22.50211,-4.38339 30.42716,1.30973c2.01576,2.43864 6.70112,4.05524 7.81827,6.25059c-0.82124,3.29055 2.27194,4.92219 2.604,7.8143c1.95195,2.23164 -1.76107,6.24383 3.79328,5.08726c6.31832,-0.0061 14.96524,-0.96767 15.45949,-6.38058c2.52162,-7.7957 3.68246,-16.5053 11.75698,-22.70966c4.4876,-1.80196 1.70021,-1.32239 -1.5791,-1.61919c-2.89908,-2.31756 2.92627,-6.0379 5.79413,-6.46198c-0.49474,-5.47721 4.68702,3.2836 6.16833,-0.73784c2.2227,0.02904 3.30631,3.6921 4.65755,0.70224c4.02962,2.34206 8.28852,5.88485 2.96559,9.14649c6.05566,1.9941 -6.17049,0.70272 -0.95447,3.75784c4.30489,2.85797 1.26186,8.13744 -2.27195,10.43825c-0.13725,1.72994 4.14333,4.24326 5.00402,6.342c4.44666,5.91281 5.33828,12.94726 3.634,19.42663c-2.3996,6.10689 -11.33,8.76437 -17.64434,12.64392c-5.3938,3.03735 -3.49599,8.36467 -6.04979,12.35347c0.25392,2.30329 2.12556,4.92618 4.78486,6.31656c3.85386,1.47931 8.36876,2.4343 11.48485,4.60018c-2.84594,1.02088 -8.64855,-3.12249 -8.70468,0.11924c-4.22776,-3.77233 -10.57446,-1.24106 -15.22137,-4.14214c3.86712,0.50621 8.89388,0.24531 4.65903,-2.93728c-1.67215,-2.69142 -6.70857,-3.62021 -6.84218,-6.87305c-4.74559,2.04645 -7.97476,4.83266 -11.42076,7.61069c-5.72067,-0.24547 -5.96733,7.67555 0.20984,7.55803c2.53683,0.44564 12.05775,2.87368 4.56034,2.2465c-2.23473,-0.27427 -4.6591,-1.23493 -4.59076,0.56758c-1.02479,-0.12661 -1.93972,-0.47675 -2.88309,-0.75611l0,0z"
				stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#BF7E96" />
			<path id="svg_6" d="m-340.11505,160.97999c-0.03272,-0.0189 -0.06834,0.00872 -0.1033,-0.0188c0.02827,-0.00237 0.07076,-0.00018 0.06326,-0.05672c0.01237,-0.06603 -0.01273,-0.13531 0.00817,-0.19278c-0.03273,-0.04212 -0.06709,-0.09198 -0.08454,-0.15081c-0.0035,0.02373 -0.00673,0.04261 -0.01171,0.0017c-0.00285,-0.02002 -0.00112,0.0495 -0.01203,0.00072c-0.01151,-0.04337 -0.04249,-0.15647 -0.0521,-0.05157c-0.00399,0.05413 -0.01652,0.01572 -0.02225,-0.01863c-0.00582,-0.06615 -0.02683,-0.12743 -0.03234,-0.19344c0.02151,-0.04182 -0.00307,-0.04751 -0.0145,-0.00579c-0.01259,0.06619 -0.02338,0.1317 -0.01024,0.19988c-0.01746,0.01926 -0.05115,-0.08961 -0.03565,-0.13137c0.01344,-0.04725 0.01045,-0.09548 0.01269,-0.12744c0.01229,-0.03606 -0.01196,-0.07524 0.00093,-0.11369c-0.03294,0.04843 -0.0624,0.08193 -0.05315,0.15791c-0.00409,0.01895 0.01373,0.12794 0.00238,0.08781c-0.02143,-0.07835 -0.02144,-0.16511 -0.00532,-0.24506c0.00002,-0.06102 -0.03668,0.10537 -0.03397,0.02381c-0.00347,-0.06151 0.01532,-0.12914 0.03313,-0.17777c-0.02027,-0.03253 -0.08592,-0.00948 -0.05486,-0.07853c0.03056,-0.03509 0.02729,-0.08335 -0.01431,-0.04092c-0.06423,0.06362 -0.11753,0.14536 -0.17641,0.21761c0.05658,-0.09807 0.12035,-0.19298 0.19929,-0.25877c0.07654,-0.065 0.18752,-0.07172 0.25357,0.02143c0.0168,0.0399 0.05584,0.06635 0.06515,0.10227c-0.00684,0.05384 0.01893,0.08053 0.0217,0.12785c0.01627,0.03651 -0.01468,0.10216 0.03161,0.08323c0.05265,-0.0001 0.12471,-0.01583 0.12883,-0.10439c0.02101,-0.12755 0.03069,-0.27005 0.09798,-0.37156c0.0374,-0.02948 0.01417,-0.02164 -0.01316,-0.02649c-0.02416,-0.03792 0.02439,-0.09879 0.04829,-0.10573c-0.00412,-0.08961 0.03906,0.05372 0.0514,-0.01207c0.01852,0.00048 0.02755,0.06041 0.03881,0.01149c0.03358,0.03832 0.06907,0.09628 0.02471,0.14965c0.05046,0.03263 -0.05142,0.0115 -0.00795,0.06148c0.03587,0.04676 0.01052,0.13314 -0.01893,0.17078c-0.00114,0.0283 0.03453,0.06942 0.0417,0.10376c0.03706,0.09674 0.04449,0.21183 0.03028,0.31784c-0.02,0.09992 -0.09442,0.1434 -0.14704,0.20687c-0.04495,0.04969 -0.02913,0.13686 -0.05042,0.20212c0.00212,0.03768 0.01771,0.0806 0.03987,0.10335c0.03212,0.0242 0.06974,0.03983 0.09571,0.07526c-0.02372,0.0167 -0.07207,-0.05109 -0.07254,0.00195c-0.03523,-0.06172 -0.08812,-0.02031 -0.12685,-0.06777c0.03223,0.00828 0.07412,0.00401 0.03883,-0.04806c-0.01393,-0.04403 -0.05591,-0.05923 -0.05702,-0.11245c-0.03955,0.03348 -0.06646,0.07907 -0.09518,0.12452c-0.04767,-0.00402 -0.04973,0.12558 0.00175,0.12366c0.02114,0.00729 0.10048,0.04702 0.038,0.03676c-0.01862,-0.00449 -0.03883,-0.0202 -0.03826,0.00929c-0.00854,-0.00207 -0.01616,-0.0078 -0.02403,-0.01237l0,0z"
				fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff" />
		</svg>
	</div>
	<script type="text/javascript" src="Aline.js"></script>
	<script type="text/javascript">
		new Aline({
			el: '#demo1',
			duration: 300
		});
		var al = new Aline({
			el: '#demo2',
			duration:3000
		});
		var playTime = al.playtime;
		document.addEventListener('click',function(e){
			al.replay();
		})
	</script>
</body>

</html>
